<template>
	<view class="">
		<view class="demo-warter"  @click="toPage(item)">
			<fui-lazyload radius="10"  :src="item.url" placeholder="/static/home/lazyimg.png"></fui-lazyload>
			<view class="demo-title">
				<view class="title-tag-xinpin" v-if="item.platformCategoryName">
					<text style="color: #ff551a;font-size: 14rpx;" >{{item.platformCategoryName}}</text>
				</view>
				<text class="title-content">
					{{item.name}}
				</text>
			</view>
			<view>
				<text style="font-size: 22rpx;color: #999;">
					规格：{{item.specification}}
				</text>
			</view>
			<view class="demo-bottom">
				<view class="bottom-price">
					￥{{ item.price }}
				</view>
				<view class="text-tip">
					终端指导价
				</view>
			</view>
			<view class="owner-container u-flex u-row-between">
				<view class="owner-item u-flex u-col-center">
					<view class="iconfont icon-huiyuan"></view>
					<view class="text">品牌商</view>
				</view>
				<view class="owner-item u-flex u-col-center">
					<view class="text">{{item.brandOwnerName}}</view>
					<fui-icon name="arrowright" color="#999" size="20"></fui-icon>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		methods:{
			toPage(item) {
					this.$mRouter.push({ route: '/pages/index/xiangqing?id=' + item.id })
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import "@/static/iconfont/iconfont.css";
	/* 瀑布流 */
	.demo-warter {
		border-radius: 10rpx;
		/* margin: 11rpx; */
		background-color: #ffffff;
		padding: 10rpx;
		box-shadow: 0px 0px 16px 4px rgba(8, 1, 3, 0.1);
		position: relative;
		.no-balance-view{ 
			position: absolute;
			// width: 100%;
			// height: 100%;
			height: 200rpx;
			width: 200rpx;
			// background-color: rgba(255,255,255,0.6);
			display: flex;
			justify-content: center;
			align-items: center;
			top: 60rpx;
			left: 66rpx;
			.no-balance-img{
				height: 200rpx;
				width: 200rpx;
			}
		}
		.active-quantity{
			position: absolute;
			height: 80rpx;
			width: 80rpx;
			border-radius: 10rpx;
			background-color: #FFBB1A;
			display: flex;
			justify-content: center;
			align-items: center;
			top: 0rpx;
			right: 0rpx;
		}
		
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title{
		padding: 0 10rpx;
		font-size: 24rpx;
		margin-top: 19rpx;
		// color: $uni-text-color;
		/* vertical-align:middle; */
		.title-tag-tuijian {
			vertical-align:middle;
			display: inline;
			width: 50rpx;
			height: 22rpx;
			// background: linear-gradient(90deg, #0D8DC3, #0CB7FF);
			background: #333333;
			border-radius: 5rpx;
			color: #FFFFFF;
			font-size: 14rpx;
			padding: 5rpx 11rpx;
			margin-right: 10rpx;
		}
		.title-tag-xinpin {
			display: inline;
			border-radius: 5rpx;
			color: #ff551a;
			border: 1px solid #ff551a;
			font-size: 14rpx;
			padding: 5rpx 11rpx;
			margin-right: 10rpx;
		}
		.title-content {
			font-size: 24rpx;
			vertical-align: middle;
			color: #333333;
			font-weight: 400;
		}
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-bottom {
		margin: 20rpx 0;
		display: flex;
		align-items:center;
		.bottom-shop {
			vertical-align: middle;
			color: #999999;
			font-size: 18rpx;
			margin-right: 30rpx;
		}
		.bottom-price {
			font-size: 34rpx;
			color: #ff551a;
			font-weight: 500;
		}
		.text-tip{
			font-size: 20rpx;
			color: #999;
			border: 1px solid #999;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 0rpx 10rpx;
			margin-left: 10rpx;
		}
	}
	.owner-container{
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 14rpx 10rpx;
		border-radius: 5rpx;
		.owner-item{
			color: #999;
			font-size: 20rpx
		}
	}
</style>
